<template>
  <div class="product-detail">
    <el-card>
      <template #header>
        <div class="card-header">
          <el-button @click="$router.back()" :icon="ArrowLeft">返回</el-button>
          <span>商品详情</span>
        </div>
      </template>

      <div v-loading="productStore.loading">
        <div v-if="product" class="detail-content">
          <!-- 基本信息 -->
          <el-row :gutter="20">
            <el-col :span="16">
              <el-descriptions title="基本信息" :column="2" border>
                <el-descriptions-item label="商品ID">{{ product.id }}</el-descriptions-item>
                <el-descriptions-item label="产品类型">{{ product.productType }}</el-descriptions-item>
                <el-descriptions-item label="商品标题" :span="2">{{ product.title }}</el-descriptions-item>
                <el-descriptions-item label="商品描述" :span="2">{{ product.content }}</el-descriptions-item>
                <el-descriptions-item label="星级">
                  <el-rate v-model="product.level" disabled show-score />
                </el-descriptions-item>
                <el-descriptions-item label="天数">{{ product.minDays }}-{{ product.maxDays }}天</el-descriptions-item>
                <el-descriptions-item label="价格">
                  <span class="price">￥{{ product.price }}</span>
                  <span v-if="product.originalPrice && product.originalPrice !== product.price" class="original-price">
                    原价：￥{{ product.originalPrice }}
                  </span>
                </el-descriptions-item>
                <el-descriptions-item label="详情状态">
                  <el-tag :type="product.detailFetched ? 'success' : 'warning'">
                    {{ product.detailFetched ? '已获取' : '未获取' }}
                  </el-tag>
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
            <el-col :span="8">
              <div class="image-section">
                <img v-if="product.imageUrl" :src="product.imageUrl" alt="商品图片" class="product-image" />
                <div v-else class="no-image">暂无图片</div>
              </div>
            </el-col>
          </el-row>

          <!-- 出发地和目的地 -->
          <el-row :gutter="20" style="margin-top: 20px;">
            <el-col :span="12">
              <el-card header="出发城市">
                <div v-if="departures.length > 0">
                  <el-tag v-for="dep in departures" :key="dep.id" style="margin-right: 8px; margin-bottom: 8px;">
                    {{ dep.name }}
                  </el-tag>
                </div>
                <div v-else class="no-data">暂无出发城市信息</div>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card header="目的地">
                <div v-if="locations.length > 0">
                  <el-tag v-for="loc in locations" :key="loc.id" type="success" style="margin-right: 8px; margin-bottom: 8px;">
                    {{ loc.name }}
                  </el-tag>
                </div>
                <div v-else class="no-data">暂无目的地信息</div>
              </el-card>
            </el-col>
          </el-row>

          <!-- 操作按钮 -->
          <div class="action-section">
            <el-button
                v-if="!product.detailFetched"
                type="primary"
                @click="fetchDetail"
                :loading="fetching"
                :icon="Download"
            >
              获取详情页面
            </el-button>
            <el-button
                v-if="product.staticPagePath"
                type="success"
                @click="viewStaticPage"
                :icon="View"
            >
              查看静态页面
            </el-button>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useProductStore } from '@/stores/product'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowLeft, Download, View } from '@element-plus/icons-vue'

const props = defineProps({
  id: {
    type: String,
    required: true
  }
})

const productStore = useProductStore()
const fetching = ref(false)
const loadingContent = ref(false)
const staticContent = ref('')

const product = computed(() => productStore.currentProduct)

const departures = computed(() => {
  if (!product.value?.departures) return []
  try {
    return JSON.parse(product.value.departures)
  } catch {
    return []
  }
})

const locations = computed(() => {
  if (!product.value?.locations) return []
  try {
    return JSON.parse(product.value.locations)
  } catch {
    return []
  }
})

const fetchDetail = async () => {
  try {
    await ElMessageBox.confirm('确认获取该商品的详情页面吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'info'
    })

    fetching.value = true
    await productStore.fetchProductDetail(props.id)
    ElMessage.success('详情获取任务已提交')
    // 重新加载商品信息
    await productStore.fetchProduct(props.id)
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('获取详情失败')
    }
  } finally {
    fetching.value = false
  }
}

const viewStaticPage = () => {
  if (product.value?.staticPagePath) {
    window.open(product.value.staticPagePath, '_blank')
  }
}

onMounted(async () => {
  await productStore.fetchProduct(props.id)
})
</script>

<style scoped>
.product-detail {
  .card-header {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .detail-content {
    .product-image {
      width: 100%;
      max-width: 300px;
      height: auto;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    }

    .no-image {
      width: 100%;
      height: 200px;
      background-color: #f5f7fa;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #909399;
      border-radius: 8px;
    }

    .price {
      color: #f56c6c;
      font-weight: bold;
      font-size: 18px;
    }

    .original-price {
      margin-left: 10px;
      color: #909399;
      text-decoration: line-through;
    }

    .no-data {
      color: #909399;
      font-style: italic;
    }

    .action-section {
      margin-top: 30px;
      text-align: center;
    }

    .static-page-info {
      margin-bottom: 20px;
      padding: 15px;
      background-color: #f5f7fa;
      border-radius: 4px;
    }

    .static-content {
      max-height: 500px;
      overflow-y: auto;
      border: 1px solid #dcdfe6;
      padding: 15px;
      border-radius: 4px;
    }
  }
}
</style>
